<template>
    <main-layout>
       <div class="up">
            <!-- 标题 -->
            <div class="title">购宜购旗舰店</div>
            <!-- 搜索 -->
            <div class="searchFuc">
                <div class="case">
                    <van-icon name="chat-o" badge="9"/>
                    <span>消息</span>
                </div>
                <van-search
                    v-model="value"
                    shape="round"
                    background="#eacbae"
                    placeholder="请输入搜索关键词"
                    />
            </div>
            <!-- tab切换 -->
            <div class="tab" >
                <van-tabs v-model="active" background="#eacbae" title-inactive-color="white" >
                    <van-tab v-for="item in tabList" :key="item.id" :title="item.name"></van-tab>
                </van-tabs>
            </div>
       </div>
       <div class="down">
            <!-- 轮播 -->
            <div class="banner">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="item in bannerList" :key="item.id">
                        <img :src="item.image" style="width:100% ;"/>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 导航 -->
            <div class="nav">
                <!-- <span class="iconfont icon-gouwudai_shopping_bg"></span> -->
                <ul>
                    <li v-for="item in navList" :key="item.id">
                        <img :src="item.image" alt="">
                        <span>{{item.title}}</span>
                    </li>
                </ul>
            </div>
            <!-- 调研问卷 -->
            <div class="question"></div>
            <!-- 展示商品区 -->
            <div class="showProduct">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                    <!-- <van-cell v-for="item in list" :key="item.id" :title="item.title" /> -->
                    <van-card v-for="item in recomList" :key="item.id"
                        num="2"
                        :price="item.price | money"
                        desc="描述信息"
                        :thumb="item.image">
                        <template v-slot:title>
                            <div class="van-ellipsis">{{item.title}}</div>
                        </template>
                        <template #tags>
                            <van-tag type="danger" style="color:red">{{item.commodityTypeName}}</van-tag>
                            <van-tag type="danger" style="margin-left:150px; color:red ; width:50px;text-align:center;" >{{item.isFreePostage?"包邮":''}}</van-tag>
                            <van-tag plain type="danger" v-if="item.couponValue">{{item.couponValue}}</van-tag>
                        </template>
                        <template #footer>
                            <van-button size="mini" type="primary">加入购物车</van-button>
                        </template>
                    </van-card>
                </van-list>
            </div>
        </div>
    </main-layout>
</template>

<script>
import { getBannerApi, getNavApi, getTabList } from '@/apis/homeApi'
export default {
  data () {
    return {
      value: '',
      tabList: [
        { id: 1, name: '活动精选' },
        { id: 2, name: '竹纤维专区' },
        { id: 3, name: '日用百货' },
        { id: 4, name: '服饰专区' }
      ],
      bannerList: [],
      navList: [],
      active: 0, // tab标签首次停留的地方
      // 展示图片区
      recomList: [],
      loading: false,
      finished: false,
      //   isEnd: false,
      nextIndex: 0
    }
  },
  async created () {
    const { data } = await getBannerApi()
    if (data.code === 200) {
      this.bannerList = data.data.list
    }
    const navResult = await getNavApi()
    if (navResult.data.code === 200) {
      this.navList = navResult.data.data.nav
    }
    const tabResult = await getTabList()
    console.log(tabResult, '------tabResult')
    if (tabResult.data.code === 200) {
      this.recomList = tabResult.data.data.list
    }
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      console.log('加载更多')
      console.log(this.nextIndex)
      const recomResult = await getTabList(this.nextIndex)
      if (recomResult.data.code === 200) {
        this.recomList = [...this.recomList, ...recomResult.data.data.list]
        this.nextIndex = recomResult.data.data.nextIndex
        this.isEnd = recomResult.data.data.isEnd
        this.loading = false
      }
    }
  }
}

</script>

<style lang="less" scoped>
//引入公共样式
@import '@/style/common.less';
.main-layout{
   background: @cf5;
   .up{
       background: #eacbae;
       padding: 10px 10px;
       display: flex;
       text-align: center;
       flex-direction: column;
       >.title{
            width: 100%;
            margin: 0 auto;
            font-size:20px;
            color: @sizeC;
        }
        >.searchFuc{
            display: flex;
            align-items: center;
            justify-content: space-around;
            >.case{
                display: flex;
                flex-direction: column;
                justify-content: center;
                >.van-icon .van-icon-chat-o{
                    font-size: 20px;
                }
                >span{
                    font-size: 16px;
                }
            }
            >.van-search{
                width: 90%;
            }
        }
        >.tab{
            >.van-tabs{
                background:#eacbae;
            }
        }
   }
   .down{
       *{
            box-sizing:border-box;}
        width:cals(100% - 10px);
        padding:0 5px;
        .banner{
        width:100%;
        height:150px;
        .my-swipe , .van-swipe{
            height: 100%;
        }
        >.my-swipe .van-swipe-item {
                width:100%;
                color: #fff;
                font-size: 20px;
                line-height: 150px;
                text-align: center;
            }
        }
        .nav{
            width: 100%;
            // height:150px;
            ul{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                li{
                    width: 18%;
                    span{
                        display: inline-block;
                        font-size: 16px;
                    }
                    img{
                        display: inline-block;
                        width: 100%;
                    }
                }
            }
        }
   }

}

</style>
